<template>
  <div class="h-100 w-100">
    <div class="left_panel">
      <div class="top_panel">
        <el-row>
          <el-col :span="6" v-for="(item,index) in top_list" :key="index">
            <img :src="item.img" />
            <div class="top_label">{{item.label}}</div>
            <div class="top_num">{{item.num}}</div>
          </el-col>
        </el-row>
      </div>
      <div class="btm_panel">
        <div class="panel-title" @click="initYJ" style="cursor: pointer;">
          <b></b> 实时警示信息 <i></i>
        </div>
        <div
          :class="activeRow==item.id?'cont_panel active':'cont_panel'"
          @click="rowClick(item)"
          v-for="(item,index) in mapJson"
          :key="index"
        >
          <div class="lft_img"></div>
          <div class="ct_panel">
            <div class="title">{{item.name}}</div>
            <div class="ctitle">匹配矿山数量：{{item.num}}座</div>
            <div class="ctitle">事故原因：{{item.reason}}</div>
            <div class="ctitle">时间：{{item.time}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="mid_panel"></div>
    <div class="right_panel">
      <div class="top_panel top_panel1" v-show="activeMarker==1"></div>
      <div class="top_panel top_panel3" v-show="activeMarker==2"></div>
      <div class="top_panel top_panel2" v-show="activeMarker==3"></div>
      <div class="top_panel top_panel4" v-show="activeMarker==4"></div>
      <div class="cont_panel">
        <el-row class="full-h">
          <el-col :span="13" class="full-h">
            <div class="echart-panel">
              <div class="panel-title">
                <b></b> 同类事故 <i></i>
              </div>
              <div v-for="(item ,index) in tlsg_list" :key="index">
                <span class="ct_span"  >{{item}}</span>
              </div>
            </div>
          </el-col>
          <el-col :span="11" class="full-h">
            <div class="echart-panel">
              <div class="panel-title">
                <b></b> 同类矿山 <i></i>
              </div>
              <div v-for="(item ,index) in tlmk_list" :key="index">
                <span class="ct_span"  >{{item}}</span>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
const pageName = "views_sgzz";

export default {
  name: pageName,
  props: {
    vm: null
  },
  data() {
    return {
      option: {},
      top_list: [
        { img: "/vae/images/z1.png", label: "已采集历史事故", num: "2350(起)" },
        { img: "/vae/images/z2.png", label: "事故类型", num: "24(种)" },
        { img: "/vae/images/z3.png", label: "动态追踪事故", num: "8(起)" },
        { img: "/vae/images/z4.png", label: "发送定向警示", num: "96(条)" }
      ],
      activeMarker: 1,
      mapJson: [
        {
          name: "美国蒙大纳州金属矿",
          id: "1",
          lat: 41.087581,
          lng: -102.38383,
          time: "2021-06-14",
          address: "美国",
          type: "珀金",
          fs: "地下开采",
          mainType: "/",
          dzType: "/",
          swType: "/",
          reason: "小型胶轮车与轨道运输车相撞",
          level: "03",
          sgType: "运输",
          num: 1,
          tlName: "云南省弥渡县金宝山铂钯矿",
          tlList: "2019.2.23内蒙古锡林郭勒盟西乌旗银漫矿业公司重大车辆事故"
        },
        {
          name: "山西代县铁矿",
          id: "2",
          lat: 39.138464,
          lng: 113.199426,
          lang: [39.138464, 113.199426],
          time: "2021-06-10",
          address: "山西代县",
          type: "铁矿石",
          fs: "地下开采",
          mainType: "水灾",
          dzType: "中等",
          swType: "中等",
          reason: "/",
          level: "01",
          sgType: "01",
          num: 2,
          tlName: "江苏南京梅山铁矿,云南玉溪大洪山铁矿",
          tlList:"2019.5.17 黑龙江逊克县铁矿透水事故,2011.7.11山东潍坊铁矿透水事故,1914.7.11美国密西根州铁矿透水事故",
        
        },
        {
          name: "山西柳林寨崖底煤业",
          id: "3",
          lat: 37.365759,
          lng: 111.039534,
          time: "2021-06-21",
          address: "山西柳林",
          type: "煤炭",
          fs: "地下开采",
          mainType: "瓦斯",
          dzType: "中等",
          swType: "中等",
          reason: "作业人员被吸入瓦斯管路",
          level: "03",
          sgType: "其他",
          num: 2,
          tlName: "西坡煤业,宏盛聚德煤业",
          tlList: "",
        },
        {
          name: "鹤壁煤电股份有限公司六矿",
          id: "4",
          lat: 35.889195,
          lng: 114.128271,
          time: "2021-06-04",
          address: "河南鹤壁",
          type: "煤炭",
          fs: "地下开采",
          mainType: "瓦斯",
          dzType: "复杂",
          swType: "复杂",
          reason: "巷掘进工作面发生煤与瓦斯突出事故",
          level: "02",
          sgType: "瓦斯",
          num: 2,
          tlName: "鹤壁中泰矿业有限公司,云顶煤业有限公司",
          tlList: "2018.8·6盘州煤与瓦斯突出事故"
        }
      ],
      mapJsonCopy: [
        {
          name: "美国蒙大纳州金属矿",
          id: "1",
          lat: 41.087581,
          lng: -102.38383,
          time: "2021-06-14",
          address: "美国",
          type: "珀金",
          fs: "地下开采",
          mainType: "/",
          dzType: "/",
          swType: "/",
          reason: "小型胶轮车与轨道运输车相撞",
          level: "03",
          sgType: "运输",
          num: 1,
          tlName: "云南省弥渡县金宝山铂钯矿",
          tlList: "2019.2.23内蒙古锡林郭勒盟西乌旗银漫矿业公司重大车辆事故"
        },
        {
          name: "山西代县铁矿",
          id: "2",
          lat: 39.138464,
          lng: 113.199426,
          lang: [39.138464, 113.199426],
          time: "2021-06-10",
          address: "山西代县",
          type: "铁矿石",
          fs: "地下开采",
          mainType: "水灾",
          dzType: "中等",
          swType: "中等",
          reason: "/",
          level: "01",
          sgType: "01",
          num: 10,
          tlName: "江苏南京梅山铁矿,云南玉溪大洪山铁矿",
          tlList:"2019.5.17 黑龙江逊克县铁矿透水事故,2011.7.11山东潍坊铁矿透水事故,1914.7.11美国密西根州铁矿透水事故",
        
        },
        {
          name: "山西柳林寨崖底煤业",
          id: "3",
          lat: 37.365759,
          lng: 111.039534,
          time: "2021-06-21",
          address: "山西柳林",
          type: "煤炭",
          fs: "地下开采",
          mainType: "瓦斯",
          dzType: "中等",
          swType: "中等",
          reason: "作业人员被吸入瓦斯管路",
          level: "03",
          sgType: "其他",
          num: 42,
          tlName: "西坡煤业,宏盛聚德煤业",
          tlList: "",
        },
        {
          name: "鹤壁煤电股份有限公司六矿",
          id: "4",
          lat: 35.889195,
          lng: 114.128271,
          time: "2021-06-01",
          address: "河南鹤壁",
          type: "煤炭",
          fs: "地下开采",
          mainType: "瓦斯",
          dzType: "复杂",
          swType: "复杂",
          reason: "巷掘进工作面发生煤与瓦斯突出事故",
          level: "02",
          sgType: "瓦斯",
          num: 55,
          tlName: "鹤壁中泰矿业有限公司,云顶煤业有限公司",
          tlList: "2018.8·6盘州煤与瓦斯突出事故"
        }
      ],
      tlsg_list: [],
      tlmk_list: [],
      activeRow: 0,
      tlks_list: [
        "呼伦贝尔大草原有XX矿山",
        "山西大同矿山",
        "河南矿山",
        "山西焦煤",
        "呼伦贝尔大草原有XX矿山",
        "山西大同矿山",
        "河南矿山",
        "山西焦煤",
        "呼伦贝尔大草原有XX矿山",
        "山西大同矿山",
        "河南矿山",
        "山西焦煤",
        "呼伦贝尔大草原有XX矿山",
        "山西大同矿山",
        "河南矿山",
        "山西焦煤",
        "山西焦煤",
        "呼伦贝尔大草原有XX矿山",
        "山西大同矿山",
        "河南矿山",
        "山西焦煤",
        "山西焦煤",
        "呼伦贝尔大草原有XX矿山",
        "山西大同矿山"
      ]
    };
  },
  methods: {
    init(){
      this.activeRow="";
      let tlsg_list=[];
      let tlmk_list=[];
      this.mapJsonCopy.forEach(v=>{
        if(v.tlList!=""){
          tlsg_list.push(v.tlList)
        }
        if(v.tlName!=""){
            tlmk_list.push(v.tlName)
        }
       
      })
      this.tlsg_list=tlsg_list.length>1?tlsg_list.join(",").split(","):[]
      this.tlmk_list=tlmk_list.length>1?tlmk_list.join(",").split(","):[]
    },
    filterMapJson(id) {
      let newOList = JSON.parse(JSON.stringify(this.mapJsonCopy));
      let row = newOList.find(v => {
        return v.id == id;
      });
      if (row) {
        this.tlmk_list =row.tlName? row.tlName.split(","):[];
        this.tlsg_list = row.tlList? row.tlList.split(","):[];
      } else {
        this.tlmk_list = [];
        this.tlsg_list = [];
      }
    },
    checkType(id) {
      this.activeMarker = id;
    },
    initYJ() {
      this.activeMarker = 1;
      this.init();
      this.mapJson = JSON.parse(JSON.stringify(this.mapJsonCopy));
      this.vm.$refs.sgzzMap.initAll(true);
    },
    rowClick(row) {
      this.activeRow = row.id;
      this.vm.$refs.sgzzMap.markerClick(row, true);
    }
  },
  mounted() {
    this.init();
  }
};
</script>
<style scoped>
.left_panel .top_panel {
  height: 16vh;
  padding: 2vh 0.5vw 1vh 0.5vw;
  width: calc(100% - 2vw);
  background: url("/vae/images/panel_bg2.png") no-repeat;
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  -o-background-size: cover;
  background-position: center 0;
}
.top_panel1 {
  background: url("/vae/images/mg.png") no-repeat;
}
.top_panel2 {
  background: url("/vae/images/sx.png") no-repeat;
}
.top_panel3 {
  background: url("/vae/images/dt.png") no-repeat;
}
.top_panel4 {
  background: url("/vae/images/hb.png") no-repeat;
}
.left_panel .top_panel img {
  width: 4vw;
  margin-left: 0.8vw;
}
.top_label {
  color: #fff;
  line-height: 5vh;
  font-size: 0.6vw;
  text-align: center;
}
.top_num {
  color: #1eeaf1;
  line-height: 2vh;
  font-size: 2.4vh;
  text-align: center;
}
.left_panel .top_panel span {
}
.left_panel .btm_panel {
  height: 67vh;
  width: calc(100% - 2vw);
  padding: 2vh 0.5vw 1vh 0.5vw;
  background: url("/vae/images/panel_bg.png") no-repeat;
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  -o-background-size: cover;
  background-position: center 0;
}
.echart-panel {
  height: calc(95%);
  padding: 0.5vh;
  background: url("../../public/images/bj1.png") no-repeat;
  background-size: 100% 100% !important;
  box-sizing: border-box;
}
.panel-title {
  width: 100%;
  height: 3vh;
  font-size: 1.8vh;
  line-height: 3vh;
  color: #fff;
  text-align: center;
}
.panel-title b {
  display: inline-block;
  width: 2vh;
  height: 2vh;
  background: url("/vae/images/zuo.png") no-repeat;
  background-size: contain;
  vertical-align: middle;
}
.panel-title i {
  display: inline-block;
  width: 2vh;
  height: 2vh;
  background: url("/vae/images/you.png") no-repeat;
  background-size: contain;
  vertical-align: middle;
}
.btm_panel .cont_panel {
  height: 8vh;
  margin: 0.9vh;
  color: #fff;
  background: url("/vae/images/tiao-1.png") no-repeat;
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  -o-background-size: cover;
  background-position: center 0;
}
.btm_panel .cont_panel:hover,
.btm_panel .cont_panel.active {
  background: url("/vae/images/tiao-2.png") no-repeat;
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  -o-background-size: cover;
  background-position: center 0;
}
.cont_panel .lft_img {
  height: 5.8vh;
  width: 5.8vh;
  margin: 1vh 0;
  background: url("/vae/images/jingdeng.gif") no-repeat;
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  -o-background-size: cover;
  background-position: center 0;
  float: left;
}
.cont_panel .ct_panel {
  height: 8vh;
  width: calc(100% - 6vh);
  float: left;
}

.ct_panel .title {
  color: #21ecf9;
  font-size: 0.8vw;
  padding: 0.1vh 0;
}
.ct_panel .ctitle {
  color: #fff;
  font-size: 0.6vw;
}

.right_panel {
  background: url("/vae/images/panel_bg.png") no-repeat;
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  -o-background-size: cover;
  background-position: center 0;
}
.right_panel .panel-title {
  cursor: pointer;
}
.right_panel .top_panel{
  width: calc(25vw - 2vh - 2vw);
  margin: 2vh 0.5vw;
  height: 30vh;
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  -o-background-size: cover;
  background-position: center 0;
}
.right_panel .cont_panel {
  height: 55vh;
  /* width: calc(100% - 2vw); */
  /* margin-left: 1vw; */
  /* background: url("/vae/images/bj2.png") no-repeat; */
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  -o-background-size: cover;
  background-position: center 0;
}
.right_panel .cont_panel .ct_span {
  height: 3vh;
  float: left;
  width: calc(100% - 0.4vw);
  color: #fff;
  font-size: 1.4vh;
  line-height: 2vh;
  padding: 0 0.2vw;
  margin: 1vh 0;
}
.right_panel .cont_panel .ct_span:before {
  content: "| "; /* 在标题前面插入文字 并设置样式 */
  color: #89b5f9;
  font-size: 20px;
  width: 2vh;
  height: 2vh;
  font-size: 1.2vh;
  font-weight: bolder;
  overflow: hidden;
  position: relative;
}
</style>
